<template>
  <div class="about">
    <h1>This is an about page</h1>
    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
      <el-button>上左</el-button>
    </el-tooltip>
    <div>
      <el-tag>标签一</el-tag>
      <el-tag type="success">标签二</el-tag>
      <el-tag type="info">标签三</el-tag>
      <el-tag type="warning">标签四</el-tag>
      <el-tag type="danger">标签五</el-tag>
    </div>
    <el-button @click="changeLang">切换语言</el-button>
    <p>{{ $t('message.hello') }}</p>
    <div style="width: 100%;height: 500px;backfround: #ccc">
      <el-table :data="tableData" style="width: 100%" stripe border @row-dblclick="edit">
        <el-table-column label="日期" width="180" align="center">
          <template v-slot="{ row }">
            <el-input v-if="row.editable" v-model="row.date"/>
            <span v-else>{{ row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="180" align="center">
          <template v-slot="{ row }">
            <el-input v-if="row.editable" v-model="row.name"/>
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址" align="center">
          <template v-slot="{ row }">
            <el-input v-if="row.editable" v-model="row.address"/>
            <span v-else>{{ row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <div v-if="row.editable">
              <el-button type="primary" size="mini" @click="save(row)">保存</el-button>
              <el-button type="warning" size="mini">取消</el-button>
            </div>
            <div v-else>
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-input
      placeholder="请选择日期">
      <i slot="suffix" class="el-input__icon el-icon-date"></i>
    </el-input>
  </div>
</template>
<script>
require('../apidemo')
// const version = require('element-ui/package.json').version // element-ui version from node_modules
export default {
  name: 'About',
  data () {
    return {
      lang: 'en',
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          editable: false
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          editable: false
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          editable: false
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          editable: false
        }
      ]
    }
  },
  methods: {
    changeLang () {
      if (this.lang === 'en') {
        this.lang = 'zh'
      } else {
        this.lang = 'en'
      }
      this.$i18n.locale = this.lang
    },
    // 双击每一行进行编辑处理
    edit (row) {
      row.editable = true
    },
    // 编辑后保存
    save (row) {
      row.editable = false
      // 然后更新数据库
    }
  },
  created () {
    // console.log(API)
    window.ajax('GetRoles', null, { token: 'bab4944376febfb2676edf046505c0ae' }).then((res) => {
      console.log(res)
    }).catch(error => {
      console.log(error)
    })
  }
}
</script>
<style scoped>

</style>
